<template>
    <div>

                <input v-model="searchMap.where.goodsName" type="text" placeholder="请输入产品名称">
        <input  v-model="searchMap.where.goodsCost" type="text" placeholder="请输入产品价格">
        <button @click="search()">搜索</button>

        <table width="100%" border="1px">
            <tr>
                <td>产品名称</td>
                <td>产品价格</td>
                <td>操作</td>
            </tr>
            <tr v-for="(item, index) in productList" :key="index">
                <td>{{item.goodsName}}</td>
                <td>{{item.goodsCost}}</td>
                <td><span @click="deleteById(item.goodsId)">删除</span><span @click="update(item)">修改</span></td>
            </tr>
        </table>

        <span @click="searchMap.page=item;search()" v-for="(item, index) in pages" :key="index">[{{item}}]</span>



        <form action="">

            <input placeholder="请输入商品名称" type="text" name="" v-model="goods.goodsName">
            <input placeholder="请输入商品的价格" type="text" name="" v-model="goods.goodsCost">

            <input @click.prevent="submit()" type="submit" value="save">

       </form>


    </div>
</template>
<script>
import {selectPage,deleteById,update,save} from '../api/product'
export default {
    data() {
        return {
             searchMap:{
                 page:1,
                 size:2,
                 where:{
                    goodsName:"",
                    goodsCost:"",
                 }

             },
             productList:[], 
             pages:0, //总页数  
             goods:{

             }
        }
    },
        methods: {

            //查询产品信息
            search(){
                 //发请求

                selectPage(this.searchMap).then(res=>{
                       this.productList = res.data;
                       this.pages = res.pages
                })

            },
            //保存/修改产品
            submit(){
               if(!this.goods.goodsId){//保存
                   
                    save(this.goods).then(res=>{
                         console.log(res);
                        //刷新表格
                        if(res.success){
                            this.search();
                        }
                    })
               }else{//修改

                    update(this.goods).then(res=>{
                             console.log(res);
                        //刷新表格
                        if(res.success){

                            this.goods = {};
                            this.search();
                        }
                    })

               }
            },
            //删除
            deleteById(id){
                deleteById(id).then(res=>{
                          if(res.success){
                           alert(res.msg);
                           if(this.searchMap.page == this.pages ){
                               this.searchMap.page --
                           }
                           this.search(); 

                     }
                })
            },
            //修改
            update(product){
                    this.goods = product;
            }

        },
        created() {//页面加载完毕
            this.search();
        },
}
</script>